<template>
	<view class='goods'>
		<view class='goods-image'>
			<image :src="info.imageUrl" class='goodImageSize' mode=""></image>
		</view>
		<div class='goods-price'>
			<div class='left'>
				<div class='nowPrice'>{{info.nowPrice}}</div>
				<div class='price' v-if='info.price'>¥{{info.price||0}}</div>
			</div>
			<!-- <div class='right'>已售：8799件</div> -->
		</div>
		<div class='title elliptical2'>
			<span class='newIcon'> 新品</span>
			{{info.goodsName}}
		</div>
		<div class='splitLine'> </div>
		<div class="detail-title">宝贝详情</div>
		<div v-html="html"></div>

		<div class='options'>
			<div class='btn' @tap="goUrl">立即购买</div>
		</div>
	</view>
</template>

<script>
	import {
		goodsDetail,
		buyGoods,
		getVoucherGoods,
		appointment,
		addressList
	} from '../../api/api.js'
	export default {
		name: 'goods',
		data() {
			return {
				goodsId: '',
				timestamp: '', // 时间戳
				isVoucher: '',
				isVip: 0, // 是否是会员礼包商品 1 是 0 不是
				info: {},
				bugPrice: 0,
				html: ''
			}
		},
		mounted() {
			// 获取商品详情
			this.getDetail()
		},
		onLoad(e) {
			this.goodsId = e.goodsId
			this.timestamp = e.timestamp
			this.isVoucher = e.isVoucher
			this.isVip = e.isVip
			this.source = e.source
		},
		methods: {
			goUrl() {
				var orderInfo = {
					goodsImg:this.info.imageUrl,
					goodsId:this.info.goodsId,
					goodsTitle:this.info.goodsName,
					goodsPrice:this.info.nowPrice,
					
				}
				var orderInfo = JSON.stringify(orderInfo)
				uni.navigateTo({
					url:'../goods/submitOrder?orderInfo=' + orderInfo + '&payType=' + this.payType + '&isVip=' + this.isVip + "&source="+this.source
				})
			},
			// 获取商品详情
			getDetail() {
				let data = {
					goodsId: this.goodsId,
					type: this.isVip == 1 ? 2 : null
				}
				goodsDetail(data).then(res => {
					this.info = res.data
					this.bugPrice = this.info.nowPrice
					var regex = new RegExp('<img ', 'gi')
					this.html = this.info.detail.replace(regex, '<img style="width: 100%;" ');
					// var that = this
					// that.interval = setInterval(function(){
					// 	// 还没到预约时间
					// 	if( that.info.state == 0 && (that.nowTimeStamp < that.info.appointTimestamp) ){
					// 		that.time = that.countDown(Number(that.info.appointTimestamp))
					// 	}else if( that.info.state == 0 && (that.nowTimeStamp > that.info.appointEndTimestamp) ) {
					// 		that.time = that.countDown(Number(that.info.nextTimestamp))
					// 	}

					// },1000)

				})
			},
		}
	}
</script>

<style scoped>
	.goods {
		display: flex;
		flex-direction: column;
		padding-bottom: 108rpx;
	}

	.goods-image {
		width: 100vw;
		height: 750rpx;

		/* .mainImage {
			width: 100%;
			height: 100%;
		} */
	}
	.goodImageSize{
		width: 100vw;
		height: 750rpx;
	}

	.goods-price {
		width: 100%;
		height: 80rpx;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.goods-price .left {
		display: flex;
		align-items: center;
	}

	.goods-price .left .nowPrice {
		font-size: 40rpx;
		color: #FF3C2D;
	}

	.goods-price .left .price {
		font-weight: 400;
		font-size: 20rpx;
		color: #C8C8C8;
		margin-left: 8rpx;
		text-decoration: line-through;

	}

	.goods-price .left .nowPrice:before {
		content: '¥';
		font-size: 20rpx;
		color: #FF3C2D;
		margin-right: 4rpx;
	}

	.goods-price .right {
		font-weight: 400;
		font-size: 30rpx;
		color: #C8C8C8;
	}

	.title {
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		line-height: 40rpx;
		margin-bottom: 28rpx;
	}

	.title .newIcon {
		padding: 2rpx 4rpx;
		background: #FF3C2D;
		border-radius: 4rpx;
		font-weight: 800;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-right: 8rpx;
	}

	.splitLine {
		width: 100%;
		height: 20rpx;
		background: #F7F7F7;
	}

	.detail-title {
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
		font-weight: bold;
		font-size: 36rpx;
		color: #3C3C3C;
		display: flex;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.options {
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 108rpx;
		background: #FFFFFF;
		box-shadow: 0px -6rpx 8rpx 0px rgba(199, 199, 199, 0.25);
		background: #FFFFFF;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	
	.options .btn{
		width: 670rpx;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		border-radius: 88rpx;
		margin: 0 auto;
		background: #00C538;
	}
</style>